<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>Document</title>
    <style>
      /* 
            格式(a,b,c) 
            a:ID选择器
            b:类选择器，伪类，属性
            c:元素选择器，伪元素
            有权重看权重，没权重，后来者局上

            行内很大，但是遇到了 !important , important最大
        */
      /* .container span.slogan {
        color: red;
      } */

      div > p > span:nth-child(1) {
        color: skyblue;
      }

      div > p > span:nth-child(1) {
        color: green;
      }

      .slogan {
        color: purple !important;
      }
    </style>
  </head>
  <body>
    <div class="container" id="ct">
      <p>
        <span class="slogan" style="color: red"
          >尚硅谷 - 让天下没有难学的技术</span
        >
        <span>欢迎同学们来学习！</span>
      </p>
    </div>
  </body>
</html>
